
    <!-- <div id="right"> -->
        <!-- 左边框 -->
        <div class="rightLeft">
            <ul>
                <li id="denglu">
                    <i class="iconfont icon-wode"></i>
                    <!-- --------------请登录滑过-------------------- -->
                    <div class="areaShow">
                        <i class="arrow_right"></i>
                        <div class="sidebar_user">
                            <div class="user_pic">
                                <div class="user_pic_mask"></div>
                                <img src="../img/4.83people.gif" alt="">
                            </div>
                            <p>
                                你好！请
                                <a href="../html/login.html">登录</a>
                                |
                                <a href="../html/signIn.html">注册</a>
                            </p>
                        </div>

                    </div>
                </li>
                <li class="xuanxiang on">
                    <i class="iconfont icon-gouwuche"></i>
                    <span>购物车</span>
                    <span class="cheche">0</span>
                    </a>
                </li>
                <li class="xuanxiang sidebar_history" id="history">
                    <a href="javascript:;">
                        <i class="iconfont icon-wodezuji"></i>
                    </a>
                    <!-- -------------浏览历史------------------ -->
                    <div class="history_show">
                        <span>浏览历史</span>
                        <i class="hirtory_right"></i>
                    </div>

                </li>
                <li class="xuanxiang " id="yhq">
                    <a href="javascript:;">
                        <i class="iconfont icon-youhuiquan"></i>
                    </a>
                    <!-- ----------------领优惠券------------------- -->
                    <div class="yhq_show">
                        <span>领优惠券</span>
                        <i class="yhq_right"></i>
                    </div>
                </li>
                <li class="collectgoods">
                    <a href="../html/login.html">
                        <i class="iconfont icon-xingxing2"></i>
                    </a>
                    <!-- ----------我的收藏----------- -->
                    <div class="collect_show">
                        我的收藏
                        <i class="collect_right"></i>
                    </div>
                </li>
                <li class="collectgoods">
                    <a href="../html/login.html">
                        <i class="iconfont icon-wodezichan"></i>
                    </a>
                    <!-- ---------------我的资产---------------- -->
                    <div class="collect_show">
                        我的资产
                        <i class="zichan_right"></i>
                    </div>
                </li>
            </ul>
            <div class="rightLeftDown">
                <!-- <a href="javascript:;">
                    <i class="iconfont icon-laba1"></i>
                    <div class="ma_show">
                        <i class="ma_right"></i>
                            <img src="../img/4.85weixin.jpg" alt="">
                    </div>
                </a> -->
                <div class="erweima">
                    <a href="javascript:;">
                        <i class="iconfont icon-erweima"></i>
                        <div class="ma_show">
                            <i class="ma_right"></i>
                                <img src="../img/4.85weixin.jpg" alt="">
                        </div>
                    </a>
                </div>
                <a href="javascript:;">
                    <i class="iconfont icon-top"></i>
                </a>
            </div>
        </div>
        <!-- 右边框 -->
        <div class="rightRight">
            <div class="open" id="che">
                <h3>
                    <i></i>
                    <span>购物车</span>
                    <i class="iconfont icon-guanbi"></i>
                </h3>
                <section class="main" id="main">
                    <section id="box">
                        <i></i>
                        <section id="text">
                            您的购物车里什么都没有哦
                            <br>
                            <a href="">再去看看吧</a>
                        </section>
                    </section>
                    <!-- 加购之后出现 -->
                    <!-- <section class="carAfter">
                        <section class="all">
                            <section class="shop1">
                                <a class="s_img">
                                    <img src="../img/4.222.jpg" alt="">
                                </a>
                                <p class="s_name">
                                    <a href="">
                                        OULE 新款炭纤维眼镜架 
                                        超轻商务舒适全框眼镜框 黑框黑腿
                                    </a>
                                </p>
                                <p class="s_price">
                                    <a href="">168.00</a>
                                </p>
                            </section>
                        </section>
                    </section> -->
                    <p class="jiesuan">
                        <a href="../html/car.html">去购物车结算</a>
                    </p>
                </section>
                
            </div>
            <div class="zuji" id="zuji">
                <h3>
                    <i></i>
                    <span>我的足迹</span>
                    <i class="iconfont icon-guanbi"></i>
                </h3>
            </div>
            <div class="quan" id="quan">
                <h3>
                    <i></i>
                    <span>优惠券</span>
                    <i class="iconfont icon-guanbi"></i>
                </h3>
                <ul>
                    <li class="y_quan" style="margin-top: 5px;">
                        <section class="l_quan">
                             <section class="num">
                                 <i>￥</i>
                                 <span>10.00</span>
                             </section>
                             <span class="dingdan">订单满100.00使用</span>
                             <p>2020-12-03~2020-12-07</p>
                        </section>
                        <section class="r_quan">
                            <a href="">立即领取</a>
                        </section>
                     </li>
                     <li class="y_quan">
                        <section class="l_quan">
                             <section class="num">
                                 <i>￥</i>
                                 <span>30.00</span>
                             </section>
                             <span class="dingdan">订单满200.00使用</span>
                             <p>2020-12-03~2020-12-07</p>
                        </section>
                        <section class="r_quan">
                            <a href="">立即领取</a>
                        </section>
                     </li>
                     <li class="y_quan">
                        <section class="l_quan">
                             <section class="num">
                                 <i>￥</i>
                                 <span>50.00</span>
                             </section>
                             <span class="dingdan">订单满500.00使用</span>
                             <p>2020-12-03~2020-12-07</p>
                        </section>
                        <section class="r_quan">
                            <a href="">立即领取</a>
                        </section>
                     </li>
                     <li class="y_quan">
                        <section class="l_quan">
                             <section class="num">
                                 <i>￥</i>
                                 <span>80.00</span>
                             </section>
                             <span class="dingdan">订单满700.00使用</span>
                             <p>2020-12-03~2020-12-07</p>
                        </section>
                        <section class="r_quan">
                            <a href="">立即领取</a>
                        </section>
                     </li>
                     <li class="y_quan">
                        <section class="l_quan">
                             <section class="num">
                                 <i>￥</i>
                                 <span>100.00</span>
                             </section>
                             <span class="dingdan">订单满1000.00使用</span>
                             <p>2020-12-03~2020-12-07</p>
                        </section>
                        <section class="r_quan">
                            <a href="">立即领取</a>
                        </section>
                     </li>
                     <li class="y_quan">
                        <section class="l_quan">
                             <section class="num">
                                 <i>￥</i>
                                 <span>150.00</span>
                             </section>
                             <span class="dingdan">订单满1400.00使用</span>
                             <p>2020-12-03~2020-12-07</p>
                        </section>
                        <section class="r_quan">
                            <a href="">立即领取</a>
                        </section>
                     </li>
                </ul>
                
            </div>
        </div>
    <!-- </div> -->
    <script>
        // 选卡哪些是属性
        // - 获取元素是属性
        // - 大盒子 按钮 div 下标iNow

        function Tab(ele) {
            // 大盒子
            this.ele = ele
            // 按钮
            this.on = this.ele.querySelectorAll('.rightLeft .xuanxiang')
            // div
            this.open = this.ele.querySelectorAll('.rightRight>div')
            // 下标
            this.iNow = 0

            // 执行事件方法
            this.addEvent()
        }

        // 方法
        Tab.prototype.addEvent = function () {
            // 循环按钮加事件
            // console.log(this)       // Tab
            let _this = this
            this.on.forEach(function (ele, index) {
                // 事件
                ele.addEventListener('click', function () {
                    // console.log(this)       // 按钮
                    // console.log(_this)      // Tab
                    _this.iNow = index
                    // 切换函数
                    _this.tab()
                })
            })
        }

        Tab.prototype.tab = function () {
            // 清空样式
            this.on.forEach((ele, index) => {
                // console.log(this)
                this.on[index].className = ''
                this.open[index].className = ''
            })

            // 当前加样式
            this.on[this.iNow].className = 'on'
            this.open[this.iNow].className = 'open'
        }
        let oBox = document.querySelector('#right')
        new Tab(oBox)



        let closeDown = document.querySelectorAll('.icon-guanbi')
        let theRight = document.querySelector('#right')
        // console.log(closeDown);
        closeDown.forEach(e => {
            e.onclick = function () {
                theRight.style.right = '-270px'
            }
        })


        let theOpen = document.querySelectorAll('.xuanxiang')
        let theOn = document.querySelector('.on')
        theOpen.forEach(ele => {
            ele.onclick = function () {
                theRight.style.right = 0
                theRight.style.transition = '.5s'
            }
        })
        if(theRight.style.right = '-270px'){
            theOpen.className = ''
            theOn.className = ''
            theRight.style.transition = '.5s'
        }


        let backTop = document.querySelector('.icon-top')
        backTop.onclick = function () {
            let timer = setInterval(function () {
                document.documentElement.scrollTop -= 100
                if (document.documentElement.scrollTop === 0) {
                    clearInterval(timer)
                }
            }, 20)
        }
    </script>
    <script>
        let arrp = JSON.parse(localStorage.getItem('shopArr'))
        if (arrp !== null) {
            $('.cheche').html(`<i class="che1">` + arrp.length + `</i>`)
        } else {
            $('.cheche').html(`<i class="che1">0</i>`)
        }

    </script>

<script>


    let oContent = document.querySelector('.main')
    let oBacbig = document.querySelector('#box')
    let carAfter = document.querySelector('.carAfter')
    let jiesuan = document.querySelector('.jiesuan')
    let arr3=[]
        let arr = JSON.parse(localStorage.getItem('shopArr'))||[]
        dataHTML()
        function dataHTML() {
            let price = 0
            if (arr.length === 0) {
   
                oBacbig.style.display = 'block'
                jiesuan.style.display = 'none'

            } else if (arr.length !== 0) {
                oBacbig.style.display = 'none'
    
            }
            arr.forEach(ele => {
                let str = `<section class="carAfter">
                        <section class="all">
                            <section class="shop1">
                                <a class="s_img">
                                    <img src="${ele[0].imgSmall}" alt="">
                                </a>
                                <p class="s_name">
                                    <a href="">
                                        ${ele[0].introduce}
                                    </a>
                                </p>
                                <p class="s_price">
                                    <a href="">单价:￥${ele[0].price}</a>
                                </p>
                            </section>
                        </section>
                    </section>
                    `

                oContent.innerHTML += str

                if (ele.flag) {
                    price += parseInt(ele.count) * parseInt(ele[0].price)
                }
            }
            )
            // 重新赋值数据
            localStorage.setItem('shopArr', JSON.stringify(arr))

        
        }

</script>